import React from "react";
import { List,  Popconfirm, message} from 'antd';
import VirtualList from 'rc-virtual-list';
import newslist from "../../../assets/db/newsList";
import './newsList.css'
import { withRouter } from "react-router";

const ContainerHeight = 400;
const text = '对此不感兴趣？';

function confirm() {
  message.info('将减少此类推送。');
}

const NewsList = (props) => {
  const newsList = newslist.contentlist;
  
  // ... 对此新闻的操作：对该新闻不感兴趣 or 减少此类推送 
  const aboutThisNews = () => {  

  }

  return (
      <>
        {/* 头部大图部分 */}
        <div className="header" >
          <img 
            className="header-img"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbj-yuantu.fotomore.com%2Fcreative%2Fvcg%2Fnew%2FVCG211363439424.jpg%3FExpires%3D1643621485%26OSSAccessKeyId%3DLTAI2pb9T0vkLPEC%26Signature%3DV7ZL3VtfrWsfGDmJDiahAW3pOgo%253D%26x-oss-process%3Dimage%252Fauto-orient%252C0%252Fsaveexif%252C1%252Fresize%252Cm_lfit%252Ch_1200%252Cw_1200%252Climit_1%252Fsharpen%252C100%252Fquality%252CQ_80%252Fwatermark%252Cg_se%252Cx_0%252Cy_0%252Cimage_d2F0ZXIvdmNnLXdhdGVyLTIwMDAucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLG1fbGZpdCxoXzE3MSx3XzE3MSxsaW1pdF8x%252F&refer=http%3A%2F%2Fbj-yuantu.fotomore.com&app=2002&size=f10000,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645709807&t=055e27d4e890f464a8fee59b44756f9a" alt="" />
          <div className="header-title">
            <h2 style={{color: "white"}}></h2>
          </div>
        </div>
        {/* 动态列表部分 */}
        <div className="list-title">
            <h3>实事热点</h3>
        </div>
        <List >
        <VirtualList
            data={newsList}
            height={ContainerHeight}
            itemHeight={47}
            itemKey="id"
        >   
            {item => (
              <div className="list-content">
                <List.Item key={item.id}> 
                  <List.Item.Meta
                    onClick={()=>{props.history.push(`/explore/${item.id}`)}}
                    title={item.title}
                    description={item.time}
                    >
                  </List.Item.Meta>
                  {/* ...省略号组件 */}
                  <div className="demo">
                  <div style={{ float: 'left' }}>
                    <Popconfirm placement="left" title={text} onConfirm={confirm} okText="确定" cancelText="取消">
                      <div className="btn" onClick={aboutThisNews}>
                        <svg
                            style={{
                                width: '25px',
                                height: '25px'
                            }}
                        >
                            <g>
                                <circle cx="5" cy="12" r="2"></circle>
                                <circle cx="12" cy="12" r="2"></circle>
                                <circle cx="19" cy="12" r="2"></circle>
                            </g>
                        </svg>
                      </div>
                    </Popconfirm>
                  </div>
                  </div>
                </List.Item>
              </div>
            )}
        </VirtualList>
        </List>
    </>
  );
};

export default withRouter(NewsList)
